<template>
    <div class="second_level_page sale_statistics_page">
        
        <div style="width:100%;text-align:center;margin-top:.5rem " >
            <p>请选择日期：</p>
            <input style="width:100%; height:8vh;margin: 2% 0;padding-left:3% ;font-size:.35rem" id="demo1" type="text" readonly="" name="input_date" placeholder="选择开始日期"data-lcalendar="2011-01-1,2020-12-31"  
            ref="inputStatrt" />
            <br>
          
            <input style="width:100%;height:8vh;margin: 2% 0; padding-left:3%;font-size:.35rem" id="demo2" type="text" readonly="" name="input_date" placeholder="选择结束日期" data-lcalendar="2011-01-1,2020-12-31" 
            ref="inputEnd"/>
            <br>
             <button style="width:93%; height:.9rem;margin:21% 0 0 0;text-align:center;font-size:.36rem;border-radius:.4rem;background:#36B4BE;color:white" @click="time()">
            
            确定
           </button>

        </div>

   

        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition>
    </div> 
</template>

<script>           
    import 'src/plugins/lCalendar.js'
    import 'src/style/lCalendar.css'
    import {mapState} from 'vuex'
    import {StatisticalOfSalesRepresentative} from 'src/service/getData'

    export default {
        data(){
            return{
                toIndex:0,
                startTime:'',
                endTime: '',
                stateFlag: '',
                flag:0,
               
            }
        },
        mounted(){
         
               
                 let calendar1 = new lCalendar();
                    calendar1.init({
                        'trigger': '#demo1',
                        'type': 'date'
                    });
                    let calendar2 = new lCalendar();
                    calendar2.init({
                        'trigger': '#demo2',
                        'type': 'date'
                       // 'type': 'dateTime'
                    });

   

           
            this.toIndex=this.$route.query.toIndex;
            //this.token = this.userInfo.token;
            //this.employeeId = this.userInfo.id;
            this.flag = this.$route.query.flag;
            this.stateFlag = this.$route.query.stateFlag;

           console.log(this.$el)

        },
        components: {
        }, 
        computed:{
       
        },        
        methods:{
            time(){
                this.startTime = this.$refs.inputStatrt.value;
                this.endTime = this.$refs.inputEnd.value;
                if(this.startTime==''||this.endTime=='')
                {
                    alert("开始日期和结束日期不能为空！");
                }
                else
                {
                    let start = new Date(this.startTime);
                    let end = new Date(this.endTime);
                    
                    if(end>=start)
                    {
                        if(this.toIndex==1)
                        {

                         this.$router.replace({path:'/profile/statistics/saleStatistics',query:{startTime:this.startTime,endTime:this.endTime}});
                        }
                        else if(this.toIndex==2)
                        {
                            this.$router.replace({path:'/profile/statistics/warehouseStatistics',query:{startTime:this.startTime,endTime:this.endTime}});

                        }
                        else if(this.toIndex==3)
                        {
                            this.$router.replace({path:'/profile/statistics/goodsStatistics',query:{startTime:this.startTime,endTime:this.endTime}});
                        }
                        else if(this.toIndex==4)//客户统计
                        {
                            this.$router.replace({path:'/profile/statistics/customerStatistics',query:{startTime:this.startTime,endTime:this.endTime,
                                flag:this.flag,stateFlag:this.stateFlag}});
                        }    
                    }
                    else
                    {
                     alert("结束日期必须大于开始日期!");
                    } 
                }    
                
            },

        },
    
        watch: {
            /*userInfo: function (value){
                this.initData()
            }*/
    

        }
}
</script>

<style lang="scss" scoped="">
    @import 'src/style/mixin';    

    .tab_section{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        @include wh(100%, .88rem);
        line-height: .88rem;
        @include sc(.32rem, #333);
        background: #fff;
        .tab{
            flex: 1;
            text-align: center;
            margin: 0 .2rem;
        }
        .tab.active{
            color: $blue;
            border-bottom: .04rem solid $blue;
        }
    }
    .statistics_main{
        z-index:-100;
        margin-top: 1.08rem;
        background: #fff;
        .choose_time{
            padding: .4rem .48rem;
            li{
                float: left;
                @include wh(.92rem, .4rem);
                margin-right: .56rem;
                div{
                    @include wh(100%, 100%);
                    @include sc(.3rem, $blue);
                    text-align: center;
                    border-radius: .2rem;
                }
            }
            li:last-child{
                margin-right: 0;
                width: 2.1rem;
            }
            li.active{
                div{
                    background: $blue;
                    color: #fff;
                }
            }
        }
        .text{
            padding: .4rem .48rem 0;
            div{
                @include sc(.26rem, #666);
            }
        }
        .table{
            padding: .58rem .24rem .52rem;
            .row{
                display: flex;
                margin-bottom: .4rem;
                .cell{
                    flex: 1;
                    @include sc(.28rem, #333);
                    text-align: center;
                    height: .28rem;
                    line-height: .28rem;
                }
            }
            .head_row{
                margin-bottom: .32rem;
                .cell{
                    color: #666;
                }
            }
            .footer_row{
                margin-top: .02rem;
                margin-bottom: 0;
                .cell{
                    color: #c8574b;
                }
            }
        }
    }
    p{
        font-size:.35rem;
        width:2.5rem;
        margin:0;

        
    }
    
</style>
